<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-25 15:31:59
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-25 16:02:12
-->
<template>
  <Dialog
    :title="props.editId ? '修改' : '新增'"
    @handle-confirm="handleConfirm"
    @closed="handleDialogClosed"
    @open="handleDialogOpen"
    :confirm-disabled="!apiScopeInfo.name"
  >
    <AppTabs
      type="card"
      :tabs="tabsSetting"
      v-model:active-tab-id="activeTabId"
    >
      <template #apiScopeInfo>
        <apiScopeForm
          :type="props.editId ? 'edit' : 'add'"
          v-model="apiScopeInfo"
        />
      </template>
      <template #claimTypes>
        <setClaimTypeForm v-model:activate="claimTypeList" />
      </template>
      <template #setPropertiesForm>
        <setPropertiesForm v-model:properties="properties" />
      </template>
    </AppTabs>
  </Dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { computed, ref } from 'vue'

import AppTabs from '@/components/AppTabs/index.vue'
import { ITabsConfig } from '@/components/AppTabs/type'
import Dialog from '@/components/Dialog/index.vue'
import { createApiScope, getApiScope, updateApiScope } from '@/http/apiScope'
import setClaimTypeForm from '@/views/system/identityServer/components/setClaimTypeForm.vue'
import setPropertiesForm from '@/views/system/identityServer/components/setPropertiesForm.vue'

import { IProperty } from '../components/types'
import apiScopeForm from './apiScopeForm.vue'

const props = defineProps({
  editId: {
    type: String,
    default: '',
  },
})
interface EmitsType {
  (e: 'update:editId', value: number | string): void
  (e: 'success'): void
}
const emit = defineEmits<EmitsType>()

const activeTabId = ref('apiScopeInfo')
const tabsSetting = computed<ITabsConfig[]>(() => {
  const setting = [
    {
      name: '信息',
      id: 'apiScopeInfo',
    },
    {
      name: '声明',
      id: 'claimTypes',
    },
  ]
  if (props.editId) {
    setting.push({
      name: '属性',
      id: 'setPropertiesForm',
    })
  }
  return setting
})

const apiScopeInfo = ref({
  name: '',
  displayName: '',
  description: '',
  required: false,
  enabled: false,
  showInDiscoveryDocument: false,
  emphasize: false,
})
const claimTypeList = ref<string[]>([])
const properties = ref<IProperty[]>([])

const handleConfirm = async () => {
  if (props.editId) {
    const data = {
      name: apiScopeInfo.value.name,
      displayName: apiScopeInfo.value.displayName,
      description: apiScopeInfo.value.description,
      emphasize: apiScopeInfo.value.emphasize,
      enabled: apiScopeInfo.value.enabled,
      required: apiScopeInfo.value.required,
      showInDiscoveryDocument: apiScopeInfo.value.showInDiscoveryDocument,
      userClaims: claimTypeList.value.map((item) => {
        return {
          type: item,
        }
      }),
      properties: properties.value,
    }
    await updateApiScope(props.editId, data)
  } else {
    const data = {
      name: apiScopeInfo.value.name,
      displayName: apiScopeInfo.value.displayName,
      description: apiScopeInfo.value.description,
      emphasize: apiScopeInfo.value.emphasize,
      enabled: apiScopeInfo.value.enabled,
      required: apiScopeInfo.value.required,
      showInDiscoveryDocument: apiScopeInfo.value.showInDiscoveryDocument,
      userClaims: claimTypeList.value.map((item) => {
        return {
          type: item,
        }
      }),
      properties: properties.value,
    }
    await createApiScope(data)
  }
  ElMessage.success('保存成功')
  emit('success')
}

const handleDialogClosed = () => {
  activeTabId.value = 'apiScopeInfo'
  emit('update:editId', '')
}
const handleDialogOpen = () => {
  apiScopeInfo.value = {
    name: '',
    displayName: '',
    description: '',
    required: false,
    enabled: false,
    showInDiscoveryDocument: false,
    emphasize: false,
  }
  claimTypeList.value = []
  properties.value = []
  if (props.editId) {
    initData()
  }
}
const initData = async () => {
  const res = await getApiScope(props.editId)
  apiScopeInfo.value = {
    name: res.name,
    displayName: res.displayName,
    description: res.description,
    required: res.required,
    enabled: res.enabled,
    showInDiscoveryDocument: res.showInDiscoveryDocument,
    emphasize: res.emphasize,
  }
  claimTypeList.value = res.userClaims.map((item) => item.type)
  properties.value = res.properties.map((item) => {
    return {
      key: item.key,
      value: item.value,
    }
  })
}
</script>

<style scoped lang="scss"></style>
